<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>用户平台</BreadcrumbItem>
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>学习网站推荐</BreadcrumbItem>
    </Breadcrumb>
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="序号"
      width="180">
    <template slot-scope="scope">
      <span style="margin-left: 10px">{{ scope.row.id }}</span>
    </template>
    </el-table-column>
    <el-table-column
      label="网站名"
      width="280">
      <template slot-scope="scope">
        <!-- <i class="el-icon-time"></i> -->
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="类型"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <!-- <p>姓名: {{ scope.row.name }}</p> -->
          <!-- <p>住址: {{ scope.row.address }}</p> -->
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.select }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="网站链接"
      width="480">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.link }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit()">跳转</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- <Button type="primary" @click="modal1 = true">添加网站</Button>
    <Modal v-model="modal1" title="添加网站" @on-ok="ok">
      <Form :model="formItem" :label-width="80">
        <FormItem label="网站名">
          <Input v-model="formItem.input" placeholder="输入网站名..."></Input>
        </FormItem>
        <FormItem label="类型">
          <Select v-model="formItem.select">
            <Option value="java">Java</Option>
            <Option value="c">C++</Option>
            <Option value="python">Python</Option>
          </Select>
        </FormItem>
        <FormItem label="网站链接">
          <Input v-model="formItem.link" placeholder="输入网站链接..."></Input>
        </FormItem>
      </Form>
    </Modal>
    <div>
      <Table border ref="selection" :columns="columns4" :data="data4"></Table>
      <Button @click="handleSelectAll(true)">全选</Button>
      <Button @click="handleSelectAll(false)">取消全选</Button>
    </div> -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [{
        id: '001',
        name: 'iview',
        select: 'Vue',
        link: 'https://iviewui.com/components/table'
      }]
    }
  },
  // return {
  //   modal1: false,
  //   formItem: {
  //     input: '',
  //     select: '',
  //     radio: 'male',
  //     checkbox: [],
  //     switch: true,
  //     slider: [20, 50],
  //     textarea: '',
  //     link: ''
  //   },
  //   columns4: [
  //     {
  //       type: 'selection',
  //       width: 60,
  //       align: 'center'
  //     },
  //     {
  //       title: '网站名',
  //       key: 'name'
  //     },
  //     {
  //       title: '类型',
  //       key: 'select'
  //     },
  //     {
  //       title: '网站链接',
  //       key: 'link'
  //     },
  //     {
  //       title: '操作',
  //       key: 'action',
  //       width: 150,
  //       align: 'center',
  //       render: (h, params) => {
  //         return h('div', [
  //           h(
  //             'Button',
  //             {
  //               props: {
  //                 type: 'primary',
  //                 size: 'small'
  //               },
  //               style: {
  //                 marginRight: '5px'
  //               },
  //               on: {
  //                 click: () => {
  //                   window.open('https://iviewui.com/components/table', '_blank')
  //                   console.log(this.link)
  //                 }
  //               }
  //             },
  //             '跳转'
  //           ),
  //           h(
  //             'Button',
  //             {
  //               props: {
  //                 type: 'error',
  //                 size: 'small'
  //               },
  //               on: {
  //                 click: () => {
  //                   this.remove(params.index)
  //                 }
  //               }
  //             },
  //             '删除'
  //           )
  //         ])
  //       }
  //     }
  //   ],
  //   data4: [
  //     {
  //       name: 'iview-ui',
  //       select: 'vue',
  //       link: 'https://iviewui.com/components/table'
  //     }
  //   ]
  // }
  methods: {
    handleEdit () {
      window.open('https://iviewui.com/components/table')
    },
    handleDelete (index, row) {
      console.log(index, row)
    }
    // handleSelectAll (status) {
    //   this.$refs.selection.selectAll(status)
    // },
    // // show (index) {
    // //   this.$Modal.info({
    // //     title: '展开信息',
    // //     content: `Name：${this.data1[index].name}<br>price：${this.data1[index].price}<br>date：${this.data1[index].date}`
    // //   })
    // // },
    // remove (index) {
    //   this.data1.splice(index, 1)
    // },
    // ok () {
    //   this.$Message.info('添加成功')
    // }
  }
}
</script>
